<template>
  <div>
    <el-dialog title="收银台" :visible.sync="dialogFormVisible">
      <el-card class="box-card">
        <div class="Payment">
          <div class="PaymentName">支付方式</div>
        </div>
        <div class="option" v-for="item in Payment" :key="item.id" @click="selectPay(item.optionName)">
          <div class="WeChat">
            <div class="checkWeChat">
              <input
                type="radio"
                class="checkbox"
                v-model="checkWeChat"
                :value="item.optionName"
              />
            </div>
            <div class="optionbox">
              <div class="optionName">
                {{ item.optionName }}
              </div>
            </div>
            <div class="optionbox2">
              <div class="optionmoney">支付：￥{{ item.money }}</div>
            </div>
          </div>
        </div>
        <el-button class="confirmPay" @click="submitForm('ruleForm')"
          >确认支付</el-button
        >
      </el-card>
    </el-dialog>
  </div>
</template>

<script>
import { getPaymentClass } from '../../api/payment'
export default {
  data () {
    return {
      dialogFormVisible: this.dialog,
      checkWeChat: '',
      Payment: []
    }
  },
  mounted () {
    // 获取支付列表
    getPaymentClass().then((res) => {
      res.data.data.forEach((item) => {
        this.Payment.push({
          id: item.id,
          optionName: item.paymentName,
          money: this.getMoney
        })
      })
    })
  },
  props: {
    dialog: {},
    money: {}
  },
  computed: {
    getMoney () {
      return this.money
    }
  },
  watch: {
    dialog (data) {
      this.dialogFormVisible = data
    },
    getMoney (data) {
      this.Payment.forEach(item => {
        item.money = data
      })
    },
    dialogFormVisible () {
      this.$emit('dialogEvt', this.dialogFormVisible)
    }

  },
  methods: {
    selectPay (name) {
      this.checkWeChat = name
    },
    submitForm () {
      console.log('提交', this.checkWeChat)
      this.$emit('pay', this.checkWeChat)
      this.dialogFormVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.box-card {
  // height: 400px;
  .Payment {
    border: 1px solid #ccc;
    width: 160px;
    height: 55px;
    font-size: 16px;
    text-align: center;
    .PaymentName {
      text-align: center;
      margin: 15px 10px 10px 10px;
    }
  }
  .option {
    // border: 1px solid;
    cursor:default;
    .WeChat {
      border: 1px solid #ccc;
      margin-top: 15px;
      display: flex;
      .checkWeChat {
        text-align: center;
        // margin-top: 10px;
        width: 100px;
        height: 55px;
        .checkbox {
          text-align: center;
          margin: 20px 10px 10px 10px;
        }
      }
      .optionbox {
        border: 1px solid #ccc;
        height: 55px;
        width: 190px;
        margin: 5px;
        .optionName {
          text-align: center;
          margin: 15px 10px 10px 10px;
        }
      }
      .optionbox2 {
        border: 1px solid #ccc;
        height: 55px;
        width: 330px;
        margin: 5px 0px 0px 35px;
        .optionmoney {
          text-align: center;
          margin: 15px 10px 10px 10px;
        }
      }
    }
  }
  .confirmPay {
    background-color: #e4393c;
    width: 182px;
    height: 39px;
    font-size: 14px;
    color: #fff;
    float: right;
    margin-top: 10px;
    margin-bottom: 10px;
  }
}
</style>
